<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>数量值{{showlist.length}}</strong></span>
    <ul class="filters">
      <li>
        <a :class="{selected:getSel === 'all' }" href="javascript:;" @click="changeGetSel('all')">全部</a>
      </li>
      <li>
        <a :class="{selected:getSel === 'no' }" href="javascript:;" @click="changeGetSel('no')">未完成</a>
      </li>
      <li>
        <a :class="{selected:getSel === 'yes' }" href="javascript:;"  @click="changeGetSel('yes')">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="delYes" >清除已完成</button>
  </footer>
</template>

<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
export default {
   
   computed: {
    ...mapState(['getSel']),
   ...mapGetters(['showlist'])
   },
   methods:{
    ...mapMutations(['changeGetSel','delFinished']),

    delYes(){
      this.delFinished()
    }
   }
}
</script>
